<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2019/6/20
  Time: 8:22
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/sharing/layuiadmin/layui/css/layui.css"  media="all">
</head>

<body>
<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入菜单名">
    </div>
    <button class="layui-btn" data-type="reload" >搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test">

</table>

</body>
<script id="toolbarDemo" type="text/html">
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    <button class="layui-btn layui-btn-sm" lay-event="delSum">批量删除</button>
    <button type="button" onclick="addmenu()" class="layui-btn layui-btn-sm">自定义菜单</button>
    <button type="button" onclick="uploadExcel()" class="layui-btn layui-btn-sm">导入</button>
</div>
</script>
<script id="barDemo" type="text/html">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/sharing/layuiadmin/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table','jquery','layer','form'], function(){
        var table = layui.table;
        var form=layui.form;
        var layer=layui.layer;
        $=layui.jquery;
        var d=table.render({
            elem: '#test'
            ,url:'#'
            ,dataType:"json"
            ,toolbar: '#toolbarDemo'
            ,title: '菜单数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'menu_id', title:'菜单ID',align:'center', width:120, fixed: 'left', unresize: true, sort: true}
                ,{field:'menu_name', title:'菜单名称',align:'center', width:120, sort: true}
                ,{field:'menu_code', title:'菜单编号',align:'center', width:120}
                ,{field:'last_menu', title:'上级菜单',align:'center', width:120, edit: 'text', sort: true,templet:function (te) {
                        if(te.last_menu===11110){
                            return '<div style="background-color:royalblue">'+te.last_menu+'</div>'
                        }else {
                            return '<div style="background-color:greenyellow">'+te.last_menu+'</div>'
                        }
                    }}
                ,{field:'menu_line', title:'菜单状态',align:'center', width:120, sort: true,templet:function (te) {
                        if(te.menu_line==='在线'){
                            return '<div style="background-color:limegreen">'+te.menu_line+'</div>'
                        }else {
                            return '<div style="background-color:#fa5e5b">'+te.menu_line+'</div>'
                        }

                    }}
                ,{field:'menu_url', title:'菜单路径',align:'center', width:120, sort: true}
                ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:120,sort: true}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [ 'prev', 'page', 'next', 'skip','limit', 'count'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,limit:5    //每页显示记录数
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }

            ,limits:[5,10,20,50,100]
            ,id:"testReload"
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                //批量删除
                case 'delSum': {
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        parent.layer.alert('您尚未选择数据!');
                        return;
                    }
                    var ids = "";
                    for (var i = 0; i < data.length; i++) {
                        ids += data[i].user_id + ",";
                    }
                    layer.confirm('您确定要删除选中数据吗？', function (index) {
                        layer.close(index);
                        $.ajax({
                            url: "../delmenus.do",
                            dataType: "json",
                            data: {ids: ids},
                            type: "GET",
                            success: function (da) {
                                layer.closeAll('loading');
                                alert(da);
                                alert(da.data);
                                if (da.data >0) {
                                    parent.layer.alert('数据已删除！');
                                    location.reload(true);
                                } else {
                                    parent.layer.alert("删除失败！");
                                }
                            },
                            error: function () {
                                parent.layer.alert("删除失败！");
                            }
                        });
                    });
                }

            };
        });



        //数据重载
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        menu_name: demoReload.val(),
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗？', {  //打开一个询问框
                    btn: ['删除','取消'] //按钮
                }, function() {
                    $.ajax({
                        url: "../deletemenu.do",
                        datatype: "json",
                        data: {menu_id: data.menu_id},
                        type: "post",
                        success: function (data) {
                            if(data.msg==1){
                                layer.open({
                                    content: '删除成功'
                                    ,btn: ['确定']
                                    ,yes: function(index, layero){
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });
                            }else{
                                layer.open({
                                    content: '删除失败'
                                    ,btn: ['确定']
                                    ,yes: function(index, layero){
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });
                            }


                        }
                    })
                    //删除数据成功，怎么刷新页面
                    location.reload();
                }, function () {
                    layer.msg('已取消', {
                        //layer.close(),
                        time: 2000, //2s后自动关闭
                        //btn: ['明白了', '知道了']
                    });
                })
            }else if(obj.event === 'edit'){
                parent.layer.open({   //打开一个弹出层
                    title: '修改界面',   //弹出层的标题
                    maxmin: true,
                    type: 2,
                    content: '../updatemenu.do?menu_id='+data.menu_id, //要访问的地址
                    area: ['800px', '500px'],


                    end: function () { //表示弹出层关闭的时候的代码块
                        location.reload();
                    }
                });
            }
        });
    });
</script>

<script>
    //新增数据
    function addmenu() {
        parent.layer.open({   //打开一个弹出层
            title: '新增界面',   //弹出层的标题
            maxmin: true,
            type: 2,
            content: '/admin/custommenu.jsp', //要访问的地址
            area: ['800px', '500px'],
            end: function () { //表示弹出层关闭的时候的代码块
                location.reload();
            }
        });
    }

    //导入表格
    function uploadExcel() {
        layui.use(['upload','table'], function(){
            var $ = layui.jquery;
            var table=layui.table;
            var upload = layui.upload;


            var ins1 = upload.render({
                // elem: '#test3',
                url: '<%= request.getContextPath() %>/servlet/SysServlet'
                ,id:'uploadExcel'
                ,accept: 'file' //普通文件
                ,exts: 'xls,xlsx' //允许上传的文件后缀
                ,done: function(res){//返回值接收
                    if(res=="1"){
                        layer.msg('导入成功！', {
                        }, function(){
                            location.reload();
                        });
                    }else{
                        layer.msg('导入失败！', {
                        }, function(){
                            location.reload();
                        });
                    }
                }
            });
            table.exportFile(ins1.config.id, data);
        });
    }

</script>
</html>